<template>
	<view class="box">
		<view class="header">
			<view class="iconfont icon-fanhui" @click="fanhui">返回</view>
			<view class="">新增水表</view>
			<view class=""> </view>
		</view>
		<!-- 输入框组 -->
		<view class="SZHEZI">
			<view class="shuzishurukuang">
				<view class="wenzibu">
					<view class="">办公区</view>
					<view class="">(生产区)</view>
				</view>
				<view class="weui-cells weui-cells_after-title">
					<view class="weui-cell weui-cell_input">
						<input class="weui-input" type="text"  v-model="bangongqu"   placeholder="请输入" />
					</view>
				</view>
			</view>
			<view class="shuzishurukuang">
				<view class="wenzibu">
					<view class="">地址</view>
				</view>
				<view class="weui-cells weui-cells_after-title">
					<view class="weui-cell weui-cell_input">
						<input class="weui-input" type="text" v-model="dazhi" placeholder="请输入" />
					</view>
				</view>
			</view>
			<view class="shuzishurukuang">
				<view class="wenzibu">
					<view class="">水表号</view>
				</view>
				<view class="weui-cells weui-cells_after-title">
					<view class="weui-cell weui-cell_input">
						<input class="weui-input" type="number"  v-model="num" placeholder="请输入" />
					</view>
				</view>
			</view>
			<view class="shuzishurukuang">
				<view class="wenzibu">
					<view class="">用水类型</view>
				</view>
				<view class="weui-cells weui-cells_after-title">
					<view class="weui-cell weui-cell_input">
						<input class="weui-input" type="number" :value="array[yongshuileixing]" placeholder="请选择" />
					</view>
				</view>
				<view class="section">
					<picker @change="bindPickerChange" :value="yongshuileixing" :range="array">
						<view class="picker iconfont icon-leixing">
						</view>
					</picker>
				</view>
			</view>
			<view class="shuzishurukuang">
				<view class="wenzibu">
					<view class="">安装时间</view>
				</view>
				<view class="weui-cells weui-cells_after-title">
					<view class="weui-cell weui-cell_input">
						<input class="weui-input" type="number" :value="anzhuang" placeholder="请选择" />
					</view>
				</view>
				<view class="section">
					<picker mode="date" :value="anzhuang" start="2015-09-01" end="2025-09-01" @change="bindDateChange">
						<view class="picker iconfont icon-rili">
						</view>
					</picker>
				</view>
			</view>
			<view class="shuzishurukuang">
				<view class="wenzibu">
					<view class="">效验时间</view>
				</view>
				<view class="weui-cells weui-cells_after-title">
					<view class="weui-cell weui-cell_input">
						<input class="weui-input" type="number" :value="jiaoyan" placeholder="请选择" />
					</view>
				</view>
				<view class="section">
					<picker mode="date" :value="jiaoyan" start="2015-09-01" end="2025-09-01" @change="bindDateChangeA">
						<view class="picker iconfont icon-rili">
						</view>
					</picker>
				</view>
			</view>
			<view class="shuzishurukuang">
				<view class="wenzibu">
					<view class="">水表类型</view>
				</view>
				<view class="weui-cells weui-cells_after-title">
					<view class="weui-cell weui-cell_input">
						<input class="weui-input" type="number" :value="arrayA[suibiaoleixing]" placeholder="请选择" />
					</view>
				</view>
				<view class="section">
					<picker @change="bindPickerChangeA" :value="suibiaoleixing" :range="arrayA">
						<view class="picker iconfont icon-leixing">
						</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="tijiao">
			<button @click="tianjia">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		ref,
		computed,
		reactive,
		toRefs
	} from 'vue'
import http from '../../../utils/http.js'
	export default {
		setup() {
			let data = reactive({
				 dazhi:'',
				 num:'',
				bangongqu:'',
				arrayA: ['工业用水', '生活用水', '生态用水', '其它用水'],
				array: ['自来水', '地表水', '地下水'],
				yongshuileixing: '请选择',
				suibiaoleixing: '请选择',
				anzhuang: '',
				jiaoyan: '',
				bindPickerChange: function(e) {
					console.log('picker发送选择改变，携带值为', e.detail.value)
					data.yongshuileixing= e.detail.value
				},
				bindDateChange: function(e) {
					console.log('picker发送选择改变，携带值为', e.detail.value)
					data.anzhuang = e.detail.value
				},
				bindDateChangeA: function(e) {
					console.log('picker发送选择改变，携带值为', e.detail.value)
					data.jiaoyan= e.detail.value
				},
				bindPickerChangeA: function(e) {
					console.log('picker发送选择改变，携带值为', e.detail.value)
					data.suibiaoleixing  = e.detail.value
				},
			tianjia(){
				
				http({
					url: "/miniwatermeter/getAddshuibaio",
					method: "post",
					data:{
						num:data.num, 
						anzhuang:data.anzhuang,
						 jiaoyan:data.jiaoyan,
						 yongshuileixing:data.array[data.yongshuileixing],
						 suibiaoleixing:data.arrayA[data.suibiaoleixing], 
						 dazhi:data.dazhi,
						 bangongqu: data.bangongqu		
					}		
				}).then((res) => {
				if(res.data.code==200){
					uni.navigateTo({
						url: '../shuibiaoguanli/shuibiaoguanli'
					})
				}
					
				 })
				
				   
			}
			});
			return {
				...toRefs(data)
			};
		},
		onLoad() {},
		methods: {
			fanhui:function(){
				uni.navigateBack({
					delta:1
				})
			}
		},
	}
</script>

<style lang="scss">
	@import url("~@/static/xzafont/font/iconfont.css");

	.box {
		font-size: 35rpx;
	}

	.header {
		display: flex;
		justify-content: space-between;
		/* background-color: #FFFFFF; */
		line-height: 90rpx;
		margin: 0 30rpx;
		border-bottom: 1rpx solid #F8F8F8;
	}

	.header .icon-fanhui {
		font-size: 35rpx;
	}

	.SZHEZI {
		display: flex;
		flex-wrap: wrap;
		margin: 0 20rpx;
		border: 1rpx solid #E4E4E4;
	}

	.shuzishurukuang {
		display: flex;
		width: 100%;
		align-content: stretch;
		border: 1rpx solid #E4E4E4;
	}

	.wenzibu {
		display: flex;
		width: 180rpx;
		height: 90rpx;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		margin: 10rpx 20rpx;
	}

	.weui-cells {
		display: flex;
		align-items: center;
	}

	.tijiao {
		display: flex;
		justify-content: center;
	}

	.tijiao button {
		width: 600rpx;
		background-color: #0079FE;
		position: fixed;
		bottom: 0;
		height: 90rpx;
	}

	.picker {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 30rpx 0rpx;
	}
</style>
